<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>

<script>
    // ES5之前因为if和for都没有块级作用域的概念，所以在很多时候，我们都必须借助于function的作用域来解决应用外面变量的问题
    // ES6中，加入了let来解决作用域的问题，let是有if和for的作用域的
    // 1. 变量的作用域
    // {
    //     var name = 'Kele';
    //     console.log(name);
    // }
    // console.log(name);

    // 2. 没有块级作用域所引起的问题: if的块级作用域
    // var func;
    // if (1) {
    //     var name = 'kele';

    //     func = function(){
    //         console.log(name);
    //     }
    //     func();
    // }
    // func();
    // name = 'why';
    // func();
    
    // 3. 没有块级作用域产生的问题：for的块级作用域
    // var btns = document.getElementsByTagName('button');
    // for (var i = 0; i < btns.length; i++) {
    //     btns[i].addEventListener('click', function(){
    //         console.log('第' + (i+1) + '个按钮被点击');
    //     })
    // }


    var btns = document.getElementsByTagName('button');
    for (let i = 0; i < btns.length; i++) {
        btns[i].addEventListener('click', function(){
            console.log('第' + (i+1) + '个按钮被点击');
        })
    }

</script>
</body>
</html>